<template>
	<view>

		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options"
			collection="opendb-mall-goods,opendb-mall-categories"
			field="category_id,goods_sn,name,goods_desc,goods_banner_imgs,goods_thumb,keywords,add_date,seller_note,remain_count,last_modify_date,comment_count,is_alone_sale,is_best,is_hot,is_new,is_on_sale,is_real,month_sell_count,total_sell_count"
			:where="queryWhere" :getone="true" :manual="true">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">
				<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
			</view>
			<view v-else-if="data">


				<view class="head">
					<view>{{data.name}}</view>
					<image :src="data.goods_thumb" mode=""></image>
					<view>{{data.goods_desc}}</view>

				</view>
				
				
				
				<view class="headzhong">
					
					<view></view>
					<view v-show="sjia1">售价：{{data.month_sell_count}}</view>
					<view v-show="sjia2">售价：{{data.remain_count}}</view>
					<!-- <button class="bu1">立即购买</button>
					<button class="bu2">加入购物车</button> -->
					
				</view>
				
				<view>
					<view class="c-row b-b" @click="toggleSpec">
						<text class="tit">购买类型</text>
						<view class="con">
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view>
						
						<text class="yticon icon-you"></text>
					</view>
				</view>
				
				
				<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
					
					<view class="mask"></view>
					<view class="layer attr-content" @click.stop="">
						<view class="a-t">
							<image src="/static/temp/qiche11.jpg"></image>
							<view class="right">
								<text class="price">¥328.00</text>
								<text class="stock">库存：188件</text>
								<view class="selected">
									已选：
									<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
										{{sItem.name}}
									</text>
								</view>
							</view>
						</view>
						<view v-for="(item,index) in specList" :key="index" class="attr-list">
							<text>{{item.name}}</text>
							<view class="item-list">
								<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id"
									:key="childIndex" class="tit" :class="{selected: childItem.selected}"
									@click="selectSpec(childIndex, childItem.pid)">
									{{childItem.name}}
								</text>
							</view>
						</view>
						<button class="btn" @click="toggleSpec">完成</button>
					</view>
				</view>
				
				<view class="gge" @click="gg">
					<view>请选择规格</view>
				</view>
				
				<view class="xzdiv" v-show="xz">
					
				<view class="ban1">
					<button class="but1" @click="sjiabian">标准版</button>
					<button class="but2" @click="sjiabian">豪华版</button>
				</view>
				<view class="ban2">
					<button class="but3">白色</button>
					<button class="but4">黑色</button>
				</view>
				
				</view>
				
				
				<uni-goods-nav @click="gwc"></uni-goods-nav>
				
				<view class="xzk">
				
				
									<!-- <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options"
										collection="opendb-mall-goods"
										field="category_id,name,goods_sn,goods_desc,goods_banner_imgs,goods_thumb,keywords,add_date,seller_note,remain_count,last_modify_date,comment_count,is_alone_sale,is_best,is_hot,is_new,is_on_sale,is_real,month_sell_count,total_sell_count"
										:where="queryWhere" :getone="true" :manual="true">
										<view v-if="error">{{error.message}}</view> -->
				
										<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
											styleType="button" activeColor="#55aaff"></uni-segmented-control>
										<view v-show="current === 2">
											<view>货号 : {{data.goods_sn}}</view>
											<view>关键字 : {{data.keywords}}</view>
											<view>
												上架时间 :
												<uni-dateformat :threshold="[0, 0]" :date="data.add_date"></uni-dateformat>
											</view>
											
											<view>销售价格 : {{data.remain_count}}</view>
											<view>总销量 : {{data.month_sell_count}}</view>
										</view>
										<view v-show="current === 1">
											<view class="pingjia" >
												<view class="pingjiadiv">
												<view>
													<image src="../../static/app-plus/sharemenu/jingp.png" mode=""></image>
												</view>
												<view>帅气哥哥</view>
												<view>太好用了啊啊啊啊</view>
												</view>
												
												<view class="pingjiadiv">
												<view>
													<image src="../../static/app-plus/sharemenu/jingp.png" mode=""></image>
												</view>
												<view>漂亮妹妹</view>
												<view>谢邀 很好用</view>
												</view>
											</view>
										</view>
										<view v-show="current === 0">
											<!-- 评价 -->
											<view class="xiangxitu">
												<view class="xiangxitu">
												
													<image :src="data.goods_banner_imgs[0]" mode=""></image>
													<image :src="data.goods_banner_imgs[1]" mode=""></image>
													<image :src="data.goods_banner_imgs[2]" mode=""></image>
													<image :src="data.goods_banner_imgs[3]" mode=""></image>
													<image :src="data.goods_banner_imgs[4]" mode=""></image>
													<image :src="data.goods_banner_imgs[5]" mode=""></image>
													<image :src="data.goods_banner_imgs[6]" mode=""></image>
													<image :src="data.goods_banner_imgs[7]" mode=""></image>
													<image :src="data.goods_banner_imgs[8]" mode=""></image>
													<image :src="data.goods_banner_imgs[9]" mode=""></image>
													<image :src="data.goods_banner_imgs[10]" mode=""></image>
													<image :src="data.goods_banner_imgs[11]" mode=""></image>
													<image :src="data.goods_banner_imgs[12]" mode=""></image>
													<image :src="data.goods_banner_imgs[13]" mode=""></image>
													<image :src="data.goods_banner_imgs[14]" mode=""></image>
													<image :src="data.goods_banner_imgs[15]" mode=""></image>
													<image :src="data.goods_banner_imgs[16]" mode=""></image>
													<image :src="data.goods_banner_imgs[17]" mode=""></image>
													<image :src="data.goods_banner_imgs[18]" mode=""></image>
													<image :src="data.goods_banner_imgs[19]" mode=""></image>
												</view>
				
											</view>
										</view>
										
										<view v-show="current === 3">
											
											<view class="eva-section">
												<text>7天无理由退换货 ·</text>
												<text>假一赔十 ·</text>
												<view>新人首单送20元无门槛代金券</view>
												<view>订单满50减10</view>
												<view>订单满100减30</view>
												<view>单笔购买满两件免邮费</view>
												
											</view>
										</view>
									<!-- </unicloud-db> -->
								</view>
			

				<!-- <view class="xiangxitu">

					<image :src="data.goods_banner_imgs[0]" mode=""></image>
					<image :src="data.goods_banner_imgs[1]" mode=""></image>
					<image :src="data.goods_banner_imgs[2]" mode=""></image>
					<image :src="data.goods_banner_imgs[3]" mode=""></image>
					<image :src="data.goods_banner_imgs[4]" mode=""></image>
					<image :src="data.goods_banner_imgs[5]" mode=""></image>
					<image :src="data.goods_banner_imgs[6]" mode=""></image>
					<image :src="data.goods_banner_imgs[7]" mode=""></image>
					<image :src="data.goods_banner_imgs[8]" mode=""></image>
					<image :src="data.goods_banner_imgs[9]" mode=""></image>
					<image :src="data.goods_banner_imgs[10]" mode=""></image>
					<image :src="data.goods_banner_imgs[11]" mode=""></image>
					<image :src="data.goods_banner_imgs[12]" mode=""></image>
					<image :src="data.goods_banner_imgs[13]" mode=""></image>
					<image :src="data.goods_banner_imgs[14]" mode=""></image>
					<image :src="data.goods_banner_imgs[15]" mode=""></image>
					<image :src="data.goods_banner_imgs[16]" mode=""></image>
					<image :src="data.goods_banner_imgs[17]" mode=""></image>
					<image :src="data.goods_banner_imgs[18]" mode=""></image>
					<image :src="data.goods_banner_imgs[19]" mode=""></image>
				</view>
 -->

			</view>
		</unicloud-db>


	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				queryWhere: '',
				listchang: [],
				specClass: 'none',
				xiangx:true,
				pjia:false,
				xz:false,
				sjia1:true,
				sjia2:false,
				shareList: [],
				specSelected: [],
				items: ['图文介绍', '用户评论', '商品详情','商品服务'],
								current: 0,

				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				specList: [{
						id: 1,
						name: '尺寸',
					},
					{
						id: 2,
						name: '颜色',
					},
				],
				specChildList: [{
						id: 1,
						pid: 1,
						name: 'XS',
					},
					{
						id: 2,
						pid: 1,
						name: 'S',
					},
					{
						id: 3,
						pid: 1,
						name: 'M',
					},
					{
						id: 4,
						pid: 1,
						name: 'L',
					},
					{
						id: 5,
						pid: 1,
						name: 'XL',
					},
					{
						id: 6,
						pid: 1,
						name: 'XXL',
					},
					{
						id: 7,
						pid: 2,
						name: '白色',
					},
					{
						id: 8,
						pid: 2,
						name: '黑色',
					},
					{
						id: 9,
						pid: 2,
						name: '灰',
					},
				]

			}
		},
		onLoad(e) {
			this._id = e.id
		},
		onReady() {
			if (this._id) {
				this.queryWhere = '_id=="' + this._id + '"'
			}
		},
		methods: {
         sppj(){
			 this.xiangx = !this.xiangx
			 this.pjia = !this.pjia
		 },
		onClickItem(e) {
						if (this.current != e.currentIndex) {
							this.current = e.currentIndex;
						}
					},
					gg(){
						this.xz = !this.xz
					},
        gwc()
		{
			console.log("添加成功")
		},
		sjiabian()
		{
			this.sjia1 = !this.sjia1
			this.sjia2 = !this.sjia2
		},
		toggleSpec() {
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.specClass = 'show';
			}
		},
		//选择规格
		selectSpec(index, pid) {
			let list = this.specChildList;
			list.forEach(item => {
				if (item.pid === pid) {
					this.$set(item, 'selected', false);
				}
			})
		
			this.$set(list[index], 'selected', true);
			//存储已选择
			/**
			 * 修复选择规格存储错误
			 * 将这几行代码替换即可
			 * 选择的规格存放在specSelected中
			 */
			this.specSelected = [];
			list.forEach(item => {
				if (item.selected === true) {
					this.specSelected.push(item);
				}
			})
			// stopPrevent
			// stop
		}
		 
		 
		}
	}
</script>

<style>
	.head {}

	.head view:nth-child(1) {
		text-align: center;
		font-size: 40rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		color: red;
	}

	.head view:nth-child(3) {
		font-size: 35rpx;
		color: #878787;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.head image {
		width: 750rpx;
		height: 600rpx;
	}

	.headtoo {

		height: 50rpx;
		position: relative;
		border: #c5c5c5 1px solid;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.headtoo view:nth-child(1) {
		position: absolute;
		left: 20rpx;
	}

	.headtoo view:nth-child(2) {
		position: absolute;
		left: 260rpx;
		color: #cbcbcb;
	}

	.headtoo view:nth-child(3) {
		position: absolute;
		right: 130rpx;
		color: #cbcbcb;
	}

	.headtoo1 {

		height: 50rpx;
		position: relative;
		border: #c5c5c5 1px solid;
		/* margin-top: 20rpx; */

	}

	.headtoo1 view:nth-child(1) {
		position: absolute;
		left: 20rpx;
	}

	.headtoo1 view:nth-child(2) {
		position: absolute;
		left: 190rpx;
		color: #007AFF;
	}

	.headtoo1 view:nth-child(3) {
		position: absolute;
		right: 130rpx;
		color: #cbcbcb;
	}

	.xiangxitu {
		width: 800rpx;

	}

	.xiangxitu image {
		width: 800rpx;
		height: 900rpx;

	}
	.headzhong
	{
		height: 100rpx;
		position: relative;
	}
	.headzhong view:nth-child(1)
	{
		
		position: absolute;
		left: 80rpx;
		color: #b0b0b0;
	}
	.headzhong view:nth-child(2)
	{
		
		position: absolute;
		left: 20rpx;
		font-size: 40rpx;
		color: red;
	}
	.headzhong view:nth-child(3)
	{
		
		position: absolute;
		left: 20rpx;
		font-size: 40rpx;
		color: red;
	}
	.bu1
	{
		border-radius:50rpx;
		width: 250rpx;
		height: 100rpx;
		position: absolute;
		top: 80rpx;
		left: 420rpx;
		background-color: #23d3c5;
	}
	.bu2
	{
		border-radius:50rpx;
		width: 250rpx;
		height: 100rpx;
		position: absolute;
		top: 80rpx;
		left: 60rpx;
		background-color: #23d3c5;
	}
	.pingjia
	{
		position: relative;
		
	}
	.pingjiadiv
	{
		border-bottom: #c5c5c5 1px solid;
		width: 800rpx;
		height: 150rpx;
	}
	.pingjiadiv image
	{
		width: 150rpx;
		height: 120rpx;
		float: left;
		
	}
	.pingjiadiv view:nth-child(2)
	{
		margin-top: 5rpx;
		color: red;
		width: 750rpx;
		height: 50rpx;
		
	}
	.pingjiadiv view:nth-child(3)
	{
		color: yellowgreen;
		width: 750rpx;
		height: 80rpx;
		
	}
	.uni-goods-nav
	{
		border: #c5c5c5 1px solid;
	}
	.gge
	{
		border: #c5c5c5 1px solid;
	}
	
	.xzk
	{
		margin-top: 6rpx;
	}
	.xzdiv
	{
		border: #c5c5c5 1px solid;
	}
	.ban1
	{
		margin-top: 10rpx;
		height: 110rpx;
		position: relative;
		
	}
	.but1
	{
		width: 200rpx;
		height: 100rpx;
		position: absolute;
		left: 100rpx;
		border-radius:50rpx;
		background-color: #23d3c5;
	}
	.but2
	{
		width: 200rpx;
		height: 100rpx;
		position: absolute;
		left: 400rpx;
		border-radius:50rpx;
		background-color: #29fceb;
	}
	.ban2
	{
		height: 110rpx;
		position: relative;
		
	}
	.but3
	{
		width: 200rpx;
		height: 100rpx;
		position: absolute;
		left: 100rpx;
		border-radius:50rpx;
		background-color: #23d3c5;
	}
	.but4
	{
		width: 200rpx;
		height: 100rpx;
		position: absolute;
		left: 400rpx;
		border-radius:50rpx;
		background-color: #23d3c5;
	}
	
	
	
	
	
	
	
	
	
	
	
	
</style>
